<template>
  <el-dialog
    class="dialog"
    title="制作单样式"
    :visible.sync="dialogTableVisible"
    append-to-body
  >
    <div :class="['make_order',isMake==true? 'make_order2':'']">
      <div class="style_list">
        <div class="lager_title">火锅店（禅城）</div>
        <div class="md_title">{{ isMake==true?'结账单-堂食-已结':'制作单-堂食' }}</div>
        <div class="tab_header">
          <div>桌号：16</div>
          <div>人数：1</div>
        </div>
        <div class="list">
          <div>
            <div>商品名称</div>
            <div>三彩无骨鱼</div>
            <!-- <div v-if="isMake == true">打包费</div> -->
          </div>
          <div v-if="isMake==false">
            <div>规格</div>
            <div>500G/微辣/草鱼</div>
            <!-- <div v-if="isMake == true">份</div> -->
          </div>
          <div>
            <div>数量</div>
            <div>1.0</div>
            <!-- <div v-if="isMake == true">1.0</div> -->
          </div>
          <div v-if="isMake==false">
            <div>价格</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>
          <div>
            <div>小计</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>

        </div>
        <div class="remark">备注：</div>
        <div class="free">赠品：350ml可口可乐1份</div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>积分优惠 积分抵扣</div>
          <div>-10</div>
        </div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>消费合计</div>
          <div>10</div>
        </div>
        <div v-if="isMake == true" class="qr_code btm_boder">
          <div class="img" />
          <div class="title">扫一扫开发票</div>
        </div>
        <div class="time">打印时间：2022-02-13 12:32</div>
        <div v-if="isMake == true" class="time">联系地址：佛山市禅城区祖庙街道城央大厦1101</div>
        <div v-if="isMake == true" class="time">联系电话：020-66139696</div>
      </div>
      <div class="style_list">
        <div class="lager_title">火锅店（禅城）</div>
        <div class="md_title">
          <div> {{ isMake==true?'结账单-打包-已结':'制作单-打包' }}</div>
          <div v-if="isMake==false">取单号：1110</div>
        </div>
        <div class="tab_header">
          <div>桌号：16</div>
          <div>人数：1</div>
        </div>
        <div class="list">
          <div>
            <div>商品名称</div>
            <div>三彩无骨鱼</div>
            <!-- <div v-if="isMake == true">打包费</div> -->
          </div>
          <div v-if="isMake==false">
            <div>规格</div>
            <div>500G/微辣/草鱼</div>
            <!-- <div v-if="isMake == true">份</div> -->
          </div>
          <div>
            <div>数量</div>
            <div>1.0</div>
            <!-- <div v-if="isMake == true">1.0</div> -->
          </div>
          <div v-if="isMake==false">
            <div>价格</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>
          <div>
            <div>小计</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>
        </div>
        <div class="remark">备注：</div>
        <div class="free">赠品：350ml可口可乐1份</div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>积分优惠 积分抵扣</div>
          <div>-10</div>
        </div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>消费合计</div>
          <div>10</div>
        </div>
        <div v-if="isMake == true" class="qr_code btm_boder">
          <div class="img" />
          <div class="title">扫一扫开发票</div>
        </div>
        <div class="time">打印时间：2022-02-13 12:32</div>
        <div v-if="isMake == true" class="time">联系地址：佛山市禅城区祖庙街道城央大厦1101</div>
        <div v-if="isMake == true" class="time">联系电话：020-66139696</div>
      </div>
    </div>

    <div v-show="isMake == false" class="make_fooder">
      <div>堂食制作单样式</div>
      <div>打包制作单样式</div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ['value'],
  data() {
    return {
      dialogTableVisible: false,
      isMake: false
    }
  },
  mounted() {

  },
  methods: {
    openDialog(type) {
      this.isMake = type != 1
      this.dialogTableVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
.dialog {
  /deep/.el-dialog__body {
    background: #808080;
    .make_fooder{
        display: flex;
        justify-content: space-between;
        div{
           text-align: center;
            width: calc(100% / 2 - 60px);
            margin: 30px 0 10px;
            font-size: 18px;
            font-weight:bold;
            color: #050505;
        }
    }
    .btm_boder{
        border-bottom: #eee dashed 2px;
    }
    .make_order{
        display: flex;
        justify-content: space-between;
        .style_list {
      width: calc(100% / 2 - 60px);
      max-width: 330px;
      background-color: #fff;
      padding: 10px 15px 50px;
      .lager_title {
        text-align: center;
        margin-bottom: 20px;
      }
      .md_title {
        margin-bottom: 15px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
      }
      .md_title2{
          display: flex;
          justify-content: space-between;
      }
      .tab_header {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border: #eee dashed 2px;
        border-left: none;
        border-right: none;
        margin-bottom: 10px;
        font-weight: bold;
      }
      .list {
          display: flex;
          justify-content: space-between;
          >div:not(:first-child){
              text-align: center;
          }
          div>div{
              margin-bottom: 10px;
          }
      }

      .remark {
        margin-bottom: 10px;
      }
      .free {
        display: flex;
        padding: 10px 0;
        border: #eee dashed 2px;
        border-left: none;
        border-right: none;
        // margin-bottom: 10px;
      }
      .time{
          margin-top: 10px;
      }
      .no_b-top{
          border-top: none;
          display: flex;
          justify-content: space-between;
      }
      .qr_code{
          display: flex;
          flex-direction: column;
          padding: 30px 0 10px;
          align-items: center;
          .img{
              width: 100px;
              height:100px;
              background: #eee;
          }
          .title{
              font-size: 12px;
              color: #808080;
              margin-top: 15px;
          }
      }
    }
    }
    .make_order2{
    .list {
        > li {
          display: flex;
          justify-content: space-between;
        //   :nth-child(2) {
        //     text-align: center;
        //   }
        //   div {
        //     width:auto important;
        //     margin-bottom: 10px;
        //   }
        //   :last-child {
        //     width: auto !important;;
        //     text-align: center;
        //   }
        }
      }
    }

  }
}
</style>
